<template>
    <div id="register1">
           <header class="header7">
                <a href=""><i class="iconfont">&#xe607;</i></a> 注册
            </header>
            <p class="tip">输入您的手机号码，点击下一步继续注册</p>
            <div class="formbox">
                <input ref="phone" class="phone" type="" placeholder="手机号" maxlength="11" />
            </div>

            <button class="submitBtn">下一步 </button>
            <div class="alertbox"></div>
    </div>
</template>

<script>
//引入jQuery
   import $ from 'jquery';

    export default {
        name: 'register1',
        data(){
            return{
               list:[]
            }
        },
        methods:{
            
        },
        computed:{

        },
         mounted(){
           var that=this;
            function showDialog(str){
                $(".alertbox").html(str)
                $(".alertbox").css("opacity","1");
                var width = parseInt($(".alertbox").css("width"))/2;
                $(".alertbox").css("margin-left",-width);
                $(".alertbox").stop().animate({  
                    opacity: 0  
                }, 3000); 
            }
            var submitBtn = $(".submitBtn").get(0);
            $(".submitBtn").click(function(){
            var result=$(".phone").val();
            if(result==""){
                showDialog("请填写手机号！")
          
            }else if(/^1[34578]\d{9}$/.test(result)==false){ 
                showDialog("请填写正确手机号!")
            }else {  
                var url="http://127.0.0.1:2000/api/registerTel";
                that.$http.post(url,{tel:result}).then(function (res) {
                    if(res.body.success==1){
                        that.$router.push({path:'/register2'})
                    }
                    else{
                        that.$router.push({path:'/login'})  //js路由跳转
                    }
                    localStorage.setItem("tel",result);
                
                },function(err){
                    console.log(err);
                })
        }  
    })
    }

        
    }
</script>